<template>
  <div class="box">
    <div class="left">
      <div class="top1"></div>
      <div class="top2">
        <div class="top2_one"></div>
        <div class="top2_two"></div>
        <div class="top2_three"></div>
      </div>
      <div class="top3"></div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorlnpmd',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.box {
  margin: 0 auto;
  width: 1400px;
  height: 600px;
  background-color: red;
  .left{
    width: 40%;
    height: 100%;
    background-color: #87df;
    .top1,.top2 {
      height: 30%;
      background-color: #4415b2;
    }
    .top2{
      background-color: pink;
      .top2_one,.top2_two,.top2_three{
       width: 30%;
       margin-right:5px ;
      }
    }
  }
}
</style>
